<template>
  <div id="insurancePage">
  	<div>
  		<ul class="insuranceList">
  			<li v-for="item in mergeData" class="insurance">
  				<div class="insuranceTop">
  					<div>
  						<p class="insuranceType">{{item.insurance.displayName}}<span @click="explain(item.insurance.id)" class="iconfont">&#xe631;</span></p>
  						<p class="explain">{{item.insurance.productIntroduction}}</p>
  					</div>
  					<div class="price"><span class="currencyType">￥ </span><span class="count">{{item.insurance.insuranceFee}}/人</span></div> 					
  				</div>
  				<div class="insuranceBottom">
  					<ul class="nameUl">
  						<li v-for="name in item.name">
  							<mu-checkbox iconClass="icon" v-model="name.isBuy" labelClass="name" :label="name.firstNameCn"/>
  						</li>					 													
  					</ul>
  				</div>
  			</li>
  		</ul>
  	</div>
		<div class="footer">
			<mu-raised-button @click="sure()" fullWidth label="完成" class="demo-raised-button" secondary/>		
		</div>
  </div> 
</template>

<script>
	import main from './main';
	export default {	
		...main
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>
